import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import './ContactSection.scss';

gsap.registerPlugin(ScrollTrigger);

const ContactSection: React.FC = () => {
  const contactRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLDivElement>(null);
  const formRef = useRef<HTMLDivElement>(null);
  const infoRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 标题动画
    gsap.fromTo(titleRef.current,
      {
        y: 50,
        opacity: 0
      },
      {
        y: 0,
        opacity: 1,
        duration: 1,
        ease: 'power2.out',
        scrollTrigger: {
          trigger: titleRef.current,
          start: 'top 80%',
          end: 'bottom 20%',
          toggleActions: 'play none none reverse'
        }
      }
    );

    // 表单动画
    gsap.fromTo(formRef.current,
      {
        x: -50,
        opacity: 0
      },
      {
        x: 0,
        opacity: 1,
        duration: 1.2,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: formRef.current,
          start: 'top 80%',
          end: 'bottom 20%',
          toggleActions: 'play none none reverse'
        }
      }
    );

    // 联系信息动画
    gsap.fromTo(infoRef.current,
      {
        x: 50,
        opacity: 0
      },
      {
        x: 0,
        opacity: 1,
        duration: 1.2,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: infoRef.current,
          start: 'top 80%',
          end: 'bottom 20%',
          toggleActions: 'play none none reverse'
        }
      }
    );

    return () => {
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
    };
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 表单提交逻辑
    console.log('表单提交');
  };

  return (
    <section ref={contactRef} className="contact-section" id="contact">
      <div className="contact-container">
        <div ref={titleRef} className="contact-header">
          <h2>联系我</h2>
          <p>让我们一起创作美好的作品</p>
        </div>
        <div className="contact-content">
          <div ref={formRef} className="contact-form">
            <form onSubmit={handleSubmit}>
              <div className="form-group">
                <input type="text" placeholder="您的姓名" required />
              </div>
              <div className="form-group">
                <input type="email" placeholder="您的邮箱" required />
              </div>
              <div className="form-group">
                <input type="tel" placeholder="联系电话" />
              </div>
              <div className="form-group">
                <select>
                  <option value="">选择服务类型</option>
                  <option value="portrait">人像摄影</option>
                  <option value="landscape">风光摄影</option>
                  <option value="wedding">婚礼摄影</option>
                  <option value="commercial">商业摄影</option>
                </select>
              </div>
              <div className="form-group">
                <textarea placeholder="项目描述或其他需求" rows={5}></textarea>
              </div>
              <button type="submit" className="submit-btn">
                发送消息
              </button>
            </form>
          </div>
          <div ref={infoRef} className="contact-info">
            <div className="info-item">
              <div className="info-icon">
                <span>📧</span>
              </div>
              <div className="info-content">
                <h4>邮箱地址</h4>
                <p>contact@photography.com</p>
              </div>
            </div>
            <div className="info-item">
              <div className="info-icon">
                <span>📱</span>
              </div>
              <div className="info-content">
                <h4>联系电话</h4>
                <p>+86 138 0013 8000</p>
              </div>
            </div>
            <div className="info-item">
              <div className="info-icon">
                <span>📍</span>
              </div>
              <div className="info-content">
                <h4>工作地点</h4>
                <p>广州市天河区</p>
              </div>
            </div>
            <div className="info-item">
              <div className="info-icon">
                <span>💬</span>
              </div>
              <div className="info-content">
                <h4>微信号</h4>
                <p>PhotoArt2024</p>
              </div>
            </div>
            <div className="social-links">
              <h4>社交媒体</h4>
              <div className="social-icons">
                <a href="#" className="social-link">微博</a>
                <a href="#" className="social-link">小红书</a>
                <a href="#" className="social-link">Instagram</a>
                <a href="#" className="social-link">500px</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="contact-cta">
        <div className="cta-content">
          <h3>准备开始你的摄影项目了吗？</h3>
          <p>联系我，让我们一起创造令人难忘的视觉故事</p>
          <button className="cta-btn">立即咨询</button>
        </div>
      </div>
    </section>
  );
};

export default ContactSection;